<template>
	<view class="">
		<view class="headtop"></view>
		<!-- 顶部 -->
		<view class="header" @click="binduser()">
			<view class="head_image">
				<image :src="avatar" style="border-radius: 50%;"></image>
			</view>
			<view class="head_name" v-if="userId">
				<view class="flex align-center">
					<view class="">{{nickName}}</view>
					<view class="text-df margin-left" style="font-weight: 200;">信用分:{{score}}分</view>
				</view>
				<view class="approve" v-if="checkCertification=='0'&&shangxian=='否'">实名认证审核中</view>
				<view class="approve" v-if="checkCertification=='1'&&shangxian=='否'">已实名</view>
				<view class="flex align-center approve" v-if="checkCertification=='2'&&shangxian=='否'">
					<view class="" @click.stop="bindapprove">实名认证未通过</view>
					<view class="margin-left" style="color: red;">{{checkCertificationMessage}}</view>
				</view>
				<view class="approve" @click.stop="bindapprove"
					v-if="(checkCertification==null||checkCertification=='')&&shangxian=='否'">未实名认证</view>
			</view>
			<view class="head_name" v-if="!userId" @click.stop="goLogin">
				登录
			</view>
		</view>
		<!-- 收入和订单 -->
		<view class="shouru" v-if="shangxian=='否'">
			<view class="user_box">
				<view class="box">
					<view class="user_name" @click="navgo('/pages/riderMy/myAccount/myAccount')">
						<u-section title="今日收入" :right="false" line-color="#FE3B27"></u-section>
					</view>
					<view class="user_price">{{indent.indentMoney?indent.indentMoney:0}} <text>元</text></view>
					<view class="user_tit ">今日收入金额</view>
				</view>
				<view class="box" @click="myOrders()">
					<view class="user_name">
						<u-section title="订单统计" :right="false" line-color="#009C66"></u-section>
					</view>
					<view class="user_price">{{indent.indentCount?indent.indentCount:0}} <text>单</text></view>
					<view class="user_tit ">今日完成单量</view>
				</view>
			</view>
		</view>
		<!-- 我的列表 -->
		<view class="mylist ">
			<view class="list_box">
				<view class="list_left">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/my/kg.png" mode="scaleToFill" class="list_img"></image>
					<view class="list_name">上线开关</view>
				</view>
				<u-switch v-model="checked" active-color="#02B595" inactive-color="#eee" size="45" @change="change"
					:loading="loading"></u-switch>
			</view>
			<view class="list_box" @click="navgo('/my/renzheng/index')">
				<view class="list_left">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/my/renz.png" mode="scaleToFill" class="list_img"></image>
					<view class="list_name">实名认证</view>
				</view>
				<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/my/icon_go.png" class="list_right"></image>
			</view>

			<view class="list_box" @click="navgo('/my/wallet/index')" v-if="shangxian=='否'">
				<view class="list_left">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/my/qianbao.png" mode="scaleToFill" class="list_img"></image>
					<view class="list_name">我的钱包</view>
				</view>
				<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/my/icon_go.png" class="list_right"></image>
			</view>
			<view class="list_box" @click="navgo('/my/wallet/baozhengjin')">
				<view class="list_left">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/my/bzj.png" mode="scaleToFill" class="list_img"></image>
					<view class="list_name">保证金</view>
				</view>
				<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/my/icon_go.png" class="list_right"></image>
			</view>
			<view class="list_box" @click="navgo('/my/car/car')">
				<view class="list_left">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/my/myCar.png" mode="scaleToFill" class="list_img"></image>
					<view class="list_name">我的车辆</view>
				</view>
				<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/my/icon_go.png" class="list_right"></image>
			</view>
			<view class="list_box" @click="changekefu">
				<view class="list_left">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/my/kefu.png" mode="scaleToFill" class="list_img"></image>
					<view class="list_name">联系客服</view>
				</view>
				<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/my/icon_go.png" class="list_right"></image>
			</view>

			<view class="list_box" @click="navgo('/my/appeal/index')">
				<view class="list_left">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/my/shensu.png" mode="scaleToFill" class="list_img"></image>
					<view class="list_name">违规申诉</view>
				</view>
				<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/my/icon_go.png" class="list_right"></image>
			</view>
			<view class="list_box" @click="navgo('/my/evaluate/index')" v-if="shangxian=='否'">
				<view class="list_left">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/my/pj.png" mode="scaleToFill" class="list_img"></image>
					<view class="list_name">我的评价</view>
				</view>
				<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/my/icon_go.png" class="list_right"></image>
			</view>
			<view class="list_box" @click="navgo('/my/setting/xyf')">
				<view class="list_left">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/my/xyf.png" mode="scaleToFill" class="list_img"
						style="width: 50rpx;height: 50rpx;"></image>
					<view class="list_name">信用分明细</view>
				</view>
				<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/my/icon_go.png" class="list_right"></image>
			</view>
			<view class="list_box" @click="navgo('/my/setting/paihangbang')">
				<view class="list_left">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/my/paihangb.png" mode="scaleToFill" class="list_img"></image>
					<view class="list_name">师傅排行榜</view>
				</view>
				<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/my/icon_go.png" class="list_right"></image>
			</view>

			<view class="list_box" @click="navgo('/my/help/trainingList')">
				<view class="list_left">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/my/hellp.png" mode="scaleToFill" class="list_img"></image>
					<view class="list_name">司机指南</view>
				</view>
				<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/my/icon_go.png" class="list_right"></image>
			</view>
			<view class="list_box" @click="navgo('/my/setting/index')" style="border-bottom: 0;">
				<view class="list_left">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/my/set.png" mode="scaleToFill" class="list_img"></image>
					<view class="list_name">设置中心</view>
				</view>
				<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/my/icon_go.png" class="list_right"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import configdata from '../../common/config.js';
	export default {
		onShareAppMessage(res) { //发送给朋友
			return {
				title: this.tuiguang,
				path: '/pages/index/index',
				imageUrl: this.tuiguangImg,
			}
		},
		onShareTimeline(res) { //分享到朋友圈
			return {
				title: this.tuiguang,
				path: '/pages/index/index',
				imageUrl: this.tuiguangImg,
			}
		},
		data() {

			return {
				tuiguang: '',
				tuiguangImg: '',
				show: false,
				title: '我的',
				information: {}, //个人信息
				daySr: '',
				orders: '',
				indent: {},

				avatar: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/logo.png',
				nickName: '匿名',
				checkCertification: '',
				userId: '',
				token: '',
				shangxian: '是',
				checkCertificationMessage: '',
				checked: false,
				loading: false,
				// 中间变量，避免在watch中多次回调，造成无限循环
				controlStatus: false,
				score: 0, //信用分
			}
		},
		onLoad() {
			this.shangxian = uni.getStorageSync('shangxian')
			this.$Request.getT('/app/common/type/276').then(res => {
				if (res.code === 0) {
					uni.setStorageSync('tuiguang', res.data.value)
					this.tuiguang = res.data.value;
				}
			});
			this.$Request.getT('/app/common/type/277').then(res => {
				if (res.code === 0) {
					uni.setStorageSync('tuiguangImg', res.data.value)
					this.tuiguangImg = res.data.value;
				}
			});

		},
		onShow() {
			if (uni.getStorageSync('token') && uni.getStorageSync('token') != void 0) {
				this.token = uni.getStorageSync('token')
			} else {
				this.token = ''
			}

			if (uni.getStorageSync('userId') && uni.getStorageSync('userId') != void 0) {
				this.userId = uni.getStorageSync('userId');
			} else {
				this.userId = ''
			}

			if (this.token) {
				this.shouru()
				this.getUserInfo(this.userId);
			} else {
				// this.goLogin();
				this.avatar = 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/logo.png'
				this.indent = {}
			}


		},
		methods: {
			//联系客服
			changekefu() {
				let kefu = this.$queue.getData('kefu'); // 用户端联系方式 1 手机号 2企业微信
				let kefuPhone = this.$queue.getData('kefuPhone');
				console.log(kefu, '111111111')
				if (kefu == 1) {
					uni.makePhoneCall({
						phoneNumber: kefuPhone //仅为示例
					});
				} else if (kefu == 2) {
					// #ifdef MP-WEIXIN
					let that = this
					try {
						wx.openCustomerServiceChat({
							extInfo: {
								url: that.$queue.getData('kefuUrl')
							},
							corpId: that.$queue.getData('kefuAppId'),
							success(res) {},
							fail(res) {
								console.error(res)
							}
						})
					} catch (error) {
						console.error("catchcatch" + error)
						uni.showToast({
							title: '请更新至微信最新版本'
						});
					}
					// #endif
					// #ifndef MP-WEIXIN
					let url = this.$queue.getData('kefuUrl');
					if (url.indexOf('/pages/') !== -1 || url.indexOf('/pageA/') !== -1 || url.indexOf('/my/') !== -1) {
						uni.navigateTo({
							url
						});
					} else {
						//#ifndef H5
						uni.navigateTo({
							url: '/pages/index/webView?url=' + url
						});
						//#endif
						//#ifdef H5
						window.location.href = url;
						//#endif
					}
					// #endif
				} else if (kefu == 3) {
					uni.navigateTo({
						url: '/my/setting/kefu'
					});
				}
			},
			getRestultFromServer() {
				this.controlStatus = true;
				// 后端允许用户关闭switch，设置checked为false，结束loading状态
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定要下线吗',
					complete: function(ret) {
						if (ret.confirm) {
							uni.showLoading({
								title: '修改中...',
							})
							that.$Request.postJson("/app/user/updateUser", {
								onLineFlag: 2
							}).then(res => {
								uni.hideLoading();
								that.loading = false;
								that.controlStatus = false
								if (res.code === 0) {
									that.checked = false;

									that.getUserInfo();
								} else {
									that.$queue.showToast(res.msg)
								}
							});
						} else if (ret.cancel) {
							that.checked = true;
							that.loading = false;
							that.controlStatus = false
						}
					},
				});
			},
			getRestultFromServer1() {
				// 通过定时器模拟向后端请求
				this.controlStatus = true;
				// 后端允许用户关闭switch，设置checked为false，结束loading状态
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定要上线吗',
					complete: function(ret) {
						if (ret.confirm) {
							uni.showLoading({
								title: '修改中...',
							})
							that.$Request.postJson("/app/user/updateUser", {
								onLineFlag: 1
							}).then(res => {
								uni.hideLoading();
								that.loading = false;
								that.controlStatus = false
								if (res.code === 0) {
									that.checked = true;
									that.getUserInfo();
								} else {
									that.$queue.showToast(res.msg)
								}
							});
						} else if (ret.cancel) {
							that.loading = false;
							that.checked = false;
							that.controlStatus = false
						}
					}
				});
			},
			//切换上线状态
			change(status) {
				if (this.checked == false) {
					if (this.controlStatus == true) {
						this.controlStatus = false;
						return;
					}
					// 重新打开switch，并让它处于加载中的状态
					this.checked = true;
					if (uni.getStorageSync('token')) {
						this.loading = true;
						this.getRestultFromServer();
					} else {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}

					// 模拟向后端发起请求


				} else if (this.checked == true) {
					if (this.controlStatus == true) {
						this.controlStatus = false;
						return;
					}
					// 重新关闭switch，并让它处于加载中的状态
					this.checked = false;
					// 模拟向后端发起请求
					if (uni.getStorageSync('token')) {
						this.loading = true;
						this.getRestultFromServer1();
					} else {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}
				}
			},
			// 查看今日收入
			profit() {
				if (!this.userId) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/riderMy/profit'
				})
			},
			// 查看订单统计
			myOrders() {
				if (!this.userId) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/riderMy/order'
				})
			},
			bindapprove() {
				uni.navigateTo({
					url: '/pages/riderMy/approve/approve'
				})
			},
			navgo(e) {
				let that = this
				if (that.token) {
					uni.navigateTo({
						url: e
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			binduser() {
				let token = this.$queue.getData('token');
				if (!token) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				uni.navigateTo({
					url: '/pages/riderMy/userinfo'
				});
			},

			// 获取个人信息
			getUserInfo(userId) {
				this.$Request.getT("/app/userinfo/findUserInfoById").then(res => {
					if (res.code == 0) {
						this.$nextTick(function() {
							this.avatar = res.data.avatar ? res.data.avatar : 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/logo.png'
							uni.getStorageSync('avatar', res.data.avatar)
							this.nickName = res.data.nickName
							this.score = res.data.score
							this.checkCertification = res.data.checkCertification
							this.checkCertificationMessage = res.data.checkCertificationMessage
							this.userId = res.data.userId
							if (res.data.onLineFlag != 2) {
								this.checked = true
							} else {
								this.checked = false
							}
						})
					} else {
						this.$queue.logout();
						uni.showModal({
							showCancel: false,
							title: '登录失败',
							content: res.msg,
						});
					}
				});
			},
			// 今日收入、订单量
			shouru() {
				this.$Request.getT('/app/userinfo/findIncome').then(res => {
					if (res.code == 0) {
						// this.daySr = res.data.income
						// this.orders = res.data.indentCount
						this.indent = res.data
					}

				});
			},
			// 跳转去登录
			goLogin() {
				// this.$queue.setData('href', '/pages/my/index');
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},
			//退出登录
			TuiLogin() {
				let that = this

				if (that.userId) {
					uni.showModal({
						title: '提示',
						content: '确认退出登录吗?',
						success: function(res) {
							if (res.confirm) {
								uni.removeStorageSync('userId')
								uni.removeStorageSync('token')
								uni.removeStorageSync('avatar')
								uni.removeStorageSync('nickName')
								uni.removeStorageSync('phone')
								uni.removeStorageSync('invitationCode')
								uni.removeStorageSync('inviterCode')
								uni.removeStorageSync('platform')
								uni.removeStorageSync('sex')
								uni.removeStorageSync('zhiFuBao')
								uni.removeStorageSync('zhiFuBaoName')
								uni.removeStorageSync('checkCertification')

								// uni.navigateBack()
								uni.redirectTo({
									url: '/pages/index/index'
								})
							} else if (res.cancel) {}
						}
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '您还未登录,请先登录',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								})
							} else if (res.cancel) {}
						}
					})
				}


			},
		}
	}
</script>

<style lang="less">
	::v-deep .u-icon__icon {
		font-size: 35rpx !important;
		font-weight: bold !important;
	}

	::v-deep .u-title {
		color: #000000 !important;
	}

	::v-deep .u-navbar-fixed {
		background: none !important;
	}

	page {
		background: #F5F5F5;
	}

	.headtop {
		background: linear-gradient(180deg, rgba(2, 181, 149, 0.97) 3%, rgba(2, 181, 149, 0) 100%);
		height: 300rpx;
		position: fixed;
		top: 0rpx;
		left: 0;
		right: 0;
		z-index: 0;
	}

	/* 顶部 */
	.header {
		width: 100%;
		height: 150rpx;
		display: flex;
		align-items: center;


	}

	.head_image {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.head_image image {
		width: 90rpx;
		height: 90rpx;
	}

	.head_name {
		flex: 4;
		position: relative;
		font-size: 36rpx;
		font-weight: bold;
		color: #FFFFFF;
	}



	.approve {
		font-size: 24rpx;
		font-weight: 500;
	}

	/* 用户信息 */
	.shouru {
		border-radius: 24rpx;
		overflow: hidden;
		width: 93%;
		margin: 0 auto;
		background: #ffffff;
		position: relative;
		z-index: 99;
	}

	.user_box {
		display: flex;
		height: 210rpx;
		padding: 0 20rpx;

	}

	.box {
		flex: 1;
		/* margin-left: 40rpx; */
		margin-top: 40rpx;
	}

	.user_price {
		font-size: 44rpx;
		margin-top: 10rpx;
	}

	.user_price text {
		font-size: 21rpx;
		margin-left: 10rpx;
	}

	.user_tit {
		color: #B3B3B3;
		font-size: 21rpx;
		margin-top: 10rpx;
	}

	::v-deep .u-section__title {
		font-weight: 500 !important;
		color: #333333 !important;
		font-size: 14px !important;
		padding-left: 10px;
	}

	/* 我的列表 */
	.mylist {
		// width: 93%;
		// margin: 0 auto;
		margin: 20rpx 30rpx;
		background-color: #FFFFFF;
		border-radius: 23rpx;
		padding: 20rpx 30upx;
	}

	.list_box {
		/* width: 90%; */
		/* margin: 0 auto; */
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 95rpx;
		border-bottom: solid 1px #eeeeee;
	}

	.list_left {
		flex: 1;
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.list_img {
		width: 56rpx;
		height: 56rpx;
		margin-right: 18rpx;
	}

	.list_name {
		font-size: 25rpx;
		letter-spacing: 2rpx;
	}


	.list_right {
		width: 12rpx;
		height: 20rpx;
	}

	.user_name {
		display: flex;
		align-items: center;
	}
</style>